<template>
    <div class="w-[15rem] p-[1rem] pb-[1.25rem] bg-[#fff] rounded-[1rem] shadow-[0px_2px_8px_0px_#0000001A]">
        <div class="font-bold text-[16px] leading-[24px] mb-[1rem]">相关推荐</div>
        <div class="flex flex-col">
            <div 
                v-for="item in relatedPosts" 
                :key="item.id"
                class="cursor-pointer hover:bg-[#F9FAFB] rounded-[0.5rem] p-[0.5rem] transition-all duration-200"
                @click="handlePostClick(item.id)"
            >
                <!-- 标题 -->
                <div class="text-[14px] leading-[20px] text-[#111827] line-clamp-2">
                    {{ item.title }}
                </div>
                <!-- 数据 -->
                <div class="flex items-center gap-[1rem] text-[12px] leading-[16px] text-[#6B7280] mt-[0.25rem]">
                    <div class="flex items-center gap-[0.25rem]">
                        <img src="/public/icon/like.png" alt="点赞" class="w-[0.875rem] h-[0.875rem]">
                        <span>{{ item.likes }}</span>
                    </div>
                    <div class="flex items-center gap-[0.25rem]">
                        <img src="/public/icon/comments.png" alt="评论" class="w-[0.875rem] h-[0.875rem]">
                        <span>{{ item.comments }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 相关帖子数据
const relatedPosts = ref([
    {
        id: 1,
        title: '如何快速掌握前端开发技巧？分享一些我的学习心得和经验总结',
        likes: 99,
        comments: 99
    },
    {
        id: 2,
        title: '前端性能优化的20个实用技巧，帮你提升网站访问速度',
        likes: 99,
        comments: 99
    },
    {
        id: 3,
        title: '从零开始学习Vue3，一篇文章带你入门composition API',
        likes: 99,
        comments: 99
    },
    {
        id: 4,
        title: 'TypeScript入门指南：类型系统详解与实战应用',
        likes: 99,
        comments: 99
    },
    {
        id: 5,
        title: '现代前端工程化实践：从项目搭建到自动化部署',
        likes: 99,
        comments: 99
    }
])

// 处理帖子点击
const handlePostClick = (id: number) => {
    window.open(`/forum/details/${id}`, '_blank')
}
</script>

<style scoped>
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
</style>